<template>
  <el-dialog
    title="处理反馈"
    :visible.sync="dialogVisible"
    width="30%"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="处理方式" prop="type">
            <el-select disabled v-model="type" placeholder="请选择处理方式">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="type === 1" :span="24">
          <el-form-item label="处理详情" prop="description">
            <el-input v-model="form.description" type="textarea" :maxlength="200" show-word-limit placeholder="请输入处理详情" :autosize="{minRows: 3, maxRows: 3}" :style="{width: '50'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="type === 1" :span="24">
          <el-form-item label="反馈图片" prop="image">
            <Upload @success="uploadSuccess"/>
          </el-form-item>
        </el-col>
        <el-col v-if="type === 3" :span="24">
          <el-form-item label="选择工程师" prop="engineerId">
            <el-select v-model="engineerId" clearable placeholder="请选择工程师">
              <el-option
                v-for="item in engineerList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="type === 3" :span="24">
          <el-form-item label="预计处理时间" prop="handleTime">
            <el-select  v-model="valueTime"  @change="changeTime" placeholder="请选择预计处理时间">
              <el-option
                v-for="item in handleTimeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="save">保 存</el-button>
      <el-button type="primary" @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Upload from '@/components/Upload'
import * as OrderAction from '@/api/order'
export default {
  name: "engineerDialog",
  components: {
    Upload
  },
  data() {
    return {
      userId: null, // 用户ID
      rowData: null,
      dialogVisible: false, // 弹窗是否显示
      engineerId: null, // 工程师ID
      engineerList: [], // 工程师列表
      type: 1,
      valueTime: null,
      handleTime: '', // 预计处理时间
      handleTimeList: [
        {id: 2, name: '预计2小时'},
        {id: 4, name: '预计4小时'},
      ],
      typeList: [
        {
          id: 1,
          name: '已完成'
        },
        {
          id: 2,
          name: '退回'
        },
        {
          id: 3,
          name: '指派给其它人'
        }
      ], // 处理方式
      form: {
        description: '',
        image: ''
      },
      rules: {
        type: [{ required: true, message: '请选择处理方式', trigger: 'blur' }],
        description: [{ required: true, message: '请输入处理详情', trigger: 'change' }],
        image: [{ required: true, message: '请上传处理图片', trigger: 'change' }],
        engineerId: [{ required: true, message: '请选择其他工程师', trigger: 'blur' }],
        handleTime: [{ required: true, message: '请选择预计处理时间', trigger: 'blur' }],
      },
    }
  },
  methods: {
    // 弹窗显示
    async show (item,userId,type) {
      this.rowData = item;
      this.userId = userId;
      this.type = type;
      console.log('shashasha', process.env.VUE_APP_IMG_URL);
      this.dialogVisible = true;
      await this.allEngineer();
    },

    // 图片上传
    uploadSuccess (file) {
      this.$set(this.form, 'image', file.url)
    },

    // 查询所有的工程师列表
    async allEngineer(page=1,size=50){
      const param = {
        pageNum: page,
        pageSize: size,
        type: 'ENGINEER'
      }
      try {
        const res = await OrderAction.getAllEngineer(param);
      if (res) {
        this.engineerList = res.dataList;
      }
      }catch (e) {
      Message.error(e.message)
      }
      // const res = await OrderAction.getAllEngineer(param);
      // if (res) {
      //   this.engineerList = res.dataList;
      // }
    },

    // 保存
    async save() {
      // 退回
      if (this.type === 2) {
        await this.goBack();
      }
      // 指派给其他人
      if (this.type === 3) {
        await this.toOther();
      }
      // 订单处理完成
      if (this.type === 1) {
        await this.saveOrder();
      }
    },
    // 订单处理完成
    async saveOrder(){
      if (!this.form.image || !this.form.description) {
        return this.$message.error('请将维修信息补充完整！')
      }
      let params = {
        id: this.rowData.id,
        userId: this.userId,
        number: this.rowData.number,
        state: 2,
        completeImg: this.form.image,
        repairDesc: this.form.description
      }
      const res = await OrderAction.updateAssign(params);
      if (res) {
        this.$message.success('工单已完成！');
        this.dialogVisible = false;
        this.$emit('reload');
      }
    },
    // 退回
    async goBack(){
      this.$confirm('是否确认退回当前订单？', '提示').then(async () =>{
        let res = await OrderAction.backOrder(this.rowData.id);
        if (res) {
          this.$message.success('退回成功');
          this.dialogVisible = false;
          this.$emit('reload');
        }
      })
    },

    // 指派给其他人
    async toOther(){
      let param = {
        ordId: this.rowData.id, //
        handleTime: this.handleTime, // 预计处理时间
        userId: this.engineerId, // 工程师ID
        id: this.rowData.ordEngId,
      }
      console.log('时间', this.handleTime);
      let res = await OrderAction.updateEngeneer(param);
      if (res) {
        this.$message.success('已成功指派给其他工程师！');
        this.dialogVisible = false;
        this.$emit('reload');
      }
    },

    // 时间选择
    changeTime() {
      if (this.valueTime) {
        this.setTimes(this.valueTime)
      }
    },

    // 时间处理
    setTimes(value) {
      let timestamp = new Date().getTime();
      timestamp = timestamp + value * 60 * 60 * 1000;
      let dataAfter = new Date(timestamp);
      let month = dataAfter.getMonth() + 1;
      let day = dataAfter.getDate();
      let min = dataAfter.getMinutes();
      if (min < 10) {
        min = "0" + min;
      }
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.handleTime =
        dataAfter.getFullYear() +
        "-" +
        month +
        "-" +
        day +
        " " +
        dataAfter.getHours() +
        ":" +
        min +
        ":" +
        dataAfter.getSeconds();
    },
  }
}
</script>

<!--<style scoped>-->

<!--</style>-->
